<template>
	<view :class="vi_pageSize">
		<vi-notify :top="topfix" ref="vi_notify"></vi-notify>
		<module-loading ref="vi_loading" :loading="vi_loading" :loadingMask="vi_loadingMask"></module-loading>
		<vi-headbar goback>
			<view slot="right">
				响应式
				<text class="response">开启</text>
				<text class="noresponse color-warning">关闭</text>
			</view>
			{{vi_pageTitle}}
		</vi-headbar>
		
		<view class="docTable">
			<view class="th">
				<view>属性名</view>
				<view>类型</view>
				<view>默认值</view>
				<view>描述</view>
			</view>
			<view class="tr">
				<view>position</view>
				<view>String</view>
				<view>fixed</view>
				<view>组件定位，可选fixed、absolute</view>
			</view>
			<view class="tr">
				<view>top</view>
				<view>Number, String</view>
				<view>0</view>
				<view>顶部定位起点，可带单位</view>
			</view>
			<view class="tr">
				<view>bottom</view>
				<view>Number, String</view>
				<view>0</view>
				<view>底部定位起点，可带单位</view>
			</view>
			<view class="tr">
				<view>point</view>
				<view>String</view>
				<view>left</view>
				<view>打开位置，可选left、right、top、bottom</view>
			</view>
			<view class="tr">
				<view>useMask</view>
				<view>Boolean</view>
				<view>true</view>
				<view>使用遮罩</view>
			</view>
			<view class="tr">
				<view>maskClick</view>
				<view>Boolean</view>
				<view>true</view>
				<view>使用点击遮罩关闭</view>
			</view>
			<view class="tr">
				<view>maskBgColor</view>
				<view>String</view>
				<view>rgba(0,0,0,0.4)</view>
				<view>遮罩背景色</view>
			</view>
			<view class="tr">
				<view>width</view>
				<view>String</view>
				<view></view>
				<view>内容区宽度，需带单位。left、right默认75%宽度，top、bottom默认100%宽度</view>
			</view>
			<view class="tr">
				<view>minWidth</view>
				<view>String</view>
				<view>20%</view>
				<view>内容区最小宽度，需带单位</view>
			</view>
			<view class="tr">
				<view>height</view>
				<view>String</view>
				<view>无</view>
				<view>内容区高度，需带单位。left、right默认100%高度</view>
			</view>
			<view class="tr">
				<view>zIndex</view>
				<view>Number</view>
				<view>99</view>
				<view>层级</view>
			</view>
			<view class="tr">
				<view>@change</view>
				<view>事件</view>
				<view>	</view>
				<view>状态变更事件</view>
			</view>
		</view>
		
		
		<view class="p-sm">
			<view class="py-sm">
				基本使用：{{`&lt;vi-drawer>内容&lt;/vi-drawer>`}}
			</view>
			<view class="py-sm">
				<vi-drawer ref="demo1">
					<view class="" :style="topFixStyleSN">
						<view class="p-md">
							默认抽屉
						</view>
					</view>
				</vi-drawer>
				<vi-button @click="openWin('demo1')">左</vi-button>
			</view>
			<view class="py-sm">
				<vi-drawer ref="demo2" point="right">
					<view class="" :style="topFixStyleSN">
						<view class="p-md">
							默认抽屉
						</view>
					</view>
				</vi-drawer>
				<vi-button @click="openWin('demo2')">右</vi-button>
			</view>
			<view class="py-sm">
				<vi-drawer ref="demo3" point="top">
					<view class="" :style="topFixStyleSN">
						<view class="p-md">
							默认抽屉
						</view>
					</view>
				</vi-drawer>
				<vi-button @click="openWin('demo3')">上</vi-button>
			</view>
			<view class="py-sm">
				<vi-drawer ref="demo4" point="bottom">
					<view class="">
						<view class="p-md">
							默认抽屉
						</view>
					</view>
				</vi-drawer>
				<vi-button @click="openWin('demo4')">下</vi-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
.response{
	display: if($useResponse, inline, none);
}
.noresponse{
	display: if($useResponse, none, inline);
}
</style>
